<!DOCTYPE html>
<!-- 省市联动 -->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function() {//入口函数
		//获得城市对象的下拉框
		var $city = $("#city");
		//  利用二维数组来表示城市，注意对应关系
		var cities = [ [ "广州市", "深圳市", "东莞市", "佛山市", "珠海市" ],
				[ "成都市", "南充市", "达州市", "遂宁市", "德阳市" ], [ "南昌市", "宜春市", "吉安市" ],
				[ "长沙市", "永州市", "株洲市" ] ];
		//获得省份的对象

		$("#provence").change(function() {
			$city.get(0).length = 1; //方式一：采用原生的方式把长度置为1；

			//$city.each(function(i,n){ 这种方式不可行，好像i一直都是0，目前还不知道为何原因
			//  alert(i);
			//  n = null;
			//});
			var val = this.value;
			$.each(cities, function(i, n) {
				if (val == i) {
					$(n).each(function(j, m) {
						//创建对象，并且添加到城市下拉框中
						$city.append("<option name='city'>" + m + "</option>")
					});
				}
			});
		});
	});
</script>

</head>
<body>
	省份：
	<select id="provence">
		<option value="0" name="provence">广东省</option>
		<option value="1" name="provence">四川省</option>
		<option value="2" name="provence">江西省</option>
		<option value="3" name="provence">湖南省</option>
	</select> 城市：
	<select id="city">
		<option value="0" name="city">请选择</option>
	</select>

</body>
</html>